<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> -->
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        body {
            background: pink;
        }

        .box {
            margin: 60px 0 0 70px;
        }

        .box>div {
            width: 730px;
            height: 50px;
            background: #fff;
            border-bottom: 1px solid rgb(193, 193, 193);
            position: relative;
        }

        img {
            /* float: left; */
            cursor: pointer;
            width: 30px;
            height: 30px;
            border-radius: 3px;
            max-width: 100%;
            line-height: 2em;
            /* vertical-align: middle; */
        }
        span{
            color: pink;
            font-size: 14px;
        }
        h6{
            color: black;
            font-size: 12px;

        }
        p {
            color: #333;
            max-width: 70%;
            white-space: nowrap;
            display: inline-block;
            vertical-align: middle;
            font-size: 16px;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div class="box">
        
    </div>
    <script>
        // XMLHttpRequest()
        var box = document.querySelector('.box');
        // 构建一个XMLHttpRequest()对象
        var xhr = new XMLHttpRequest();
        // 监听请求状态的函数 一旦发送一个请求,请求会经历5个阶段
        // var title = data1.data[i].title
        xhr.onreadystatechange = function () {
            // xhr.readyState获取当前请求状态的 状态值 0 -- 4
            // xhr.responseText获取响应数据
            // (当前请求地址返回回来的数据是json字符串)
            if (xhr.readyState === 4) {
                box.innerHTML = '';
                var data1 = JSON.parse(xhr.responseText); //要转成json对象
                console.log(data1);  // 获得数据
                // console.log(data1.data.length);
                for (let i = 0; i < data1.data.length; i++) {
                    var title = data1.data[i].title;
                    var imgurl = data1.data[i].author.avatar_url;
                    var reply = data1.data[i].reply_count;
                    var visit = data1.data[i].visit_count;
                    // console.log(imgurl); 
                    // console.log(title); 
                    // console.log(reply); 
                    // console.log(visit); 
                    box.innerHTML += `<div><img src="${imgurl}"><span>${reply}/</span><span>${visit}</span>
                    <p>${title}</p>
                    </div>`;
                }
            }
            // div.innerHTML = '';
            // for (let i = 0; i < data.length;i++) {}
        }
        // 配置请求信息 请求类型 请求地址
        xhr.open("get", "https://cnodejs.org/api/v1/topics");
        // 发送这个请求
        xhr.send();


        
    </script>
</body>

</html>